<template>
  <div>
    <el-image
      style="animation: header-effect 2s"
      class="background-image"
      v-once
      lazy
      :src="$constant.friendBG"
      fit="cover"
    >
      <div slot="error" class="image-slot background-image-error"></div>
    </el-image>

    <!-- 封面 -->
    <div class="friend-head myCenter">
      <h1
        style="
          color: var(--white);
          z-index: 10;
          font-weight: 700;
          font-size: 55px;
        "
      >
        愿望清单 &nbsp;
      </h1>
      <h1
        style="
          color: var(--white);
          z-index: 10;
          font-weight: 700;
          font-size: 45px;
        "
      >
        (待办)
      </h1>
    </div>

    <!-- 清单 -->
    <div style="display: flex; justify-content: center; padding: 40px 0">
      <!-- <div class="qing-dan">
      <div class="qing-dan-1">
      </div>
      <div class="qing-dan-1">
      </div>
      <div class="qing-dan-1">
      </div>

    </div> -->

      <div class="container">
        <div class="box" v-for="(item,index) in 9" :key="index" >
          <div class="box-title" :style="generateBackgroundStyle(index)" >
            <div class="box-title-1">想去的地方</div>
            <el-radio disabled v-model="radio" v-if="item!=1" label="禁用" style="width: 100%;margin-left:5px;text-color:white;"
              >北京1</el-radio
            >
            <el-radio disabled v-model="radio" label="禁用" style="width: 100%;margin-left:5px;"
              >上海1</el-radio
            >
            <el-radio disabled v-model="radio" label="禁用" style="width: 100%;margin-left:5px;"
              >西安1</el-radio
            >
            <el-radio disabled v-model="radio" v-if="item==4" label="禁用" style="width: 100%;margin-left:5px;"
              >西藏1</el-radio
            >
            <el-radio disabled v-model="radio" v-if="item!=5 && item!=6" label="禁用" style="width: 100%;margin-left:5px;"
              >北京2</el-radio
            >
            <el-radio disabled v-model="radio" label="禁用" style="width: 100%;margin-left:5px;"
              >上海2</el-radio
            >
            <el-radio disabled v-model="radio" v-if="item!=7 && item!=8" label="禁用" style="width: 100%;margin-left:5px;"
              >西安2</el-radio
            >
            <el-radio disabled v-model="radio" label="禁用" style="width: 100%;margin-left:5px;"
              >西藏2</el-radio
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <myFooter></myFooter>
  </div>
</template>

<script>
const myFooter = () => import("./common/myFooter");

export default {
  components: {
    myFooter,
    // card,
    // proButton
  },

  data() {
    return {
      radio: "禁用",
      checked1: "",

          animationDuration: '5s',
    gradientSize: '300% 300%',

      items:[
        'Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'
      ],

      colors : ['red', 'orange', 'yellow', 'green', 'blue', 'purple', 'pink', 'teal', 'magenta', 'lime', 'cyan', 'indigo', 'violet', 'brown', 'gray', 'black', 'white'],

    };
  },

  computed: {},

  watch: {},

  created() {

  },

  mounted() {
  
  },

  methods: {

    generateBackgroundStyle(index) {

        const colorIndex1 =  Math.floor(Math.random() * this.colors.length); // 根据索引计算颜色序号，假设有5个颜色
        const colorIndex2 =  Math.floor(Math.random() * this.colors.length); // 根据索引计算颜色序号，假设有5个颜色
        const colorIndex3 =  Math.floor(Math.random() * this.colors.length); // 根据索引计算颜色序号，假设有5个颜色
        const colorIndex4 =  Math.floor(Math.random() * this.colors.length); // 根据索引计算颜色序号，假设有5个颜色

        return {
          background: `linear-gradient(to right bottom, #ff4500, #ffa500, #ffd700, #90ee90, #00ffff, #1e90ff, #9370db, #ff69b4, #ff4500)`,
          // background: `linear-gradient(270deg, ${this.colors[colorIndex1]}, ${this.colors[colorIndex2]}, ${this.colors[colorIndex3]}, ${this.colors[colorIndex4]})`,
          // background: `linear-gradient(to right, ${this.colors[colorIndex1]}, ${this.colors[colorIndex2]}, ${this.colors[colorIndex3]}, ${this.colors[colorIndex4]})`,
          // background: `linear-gradient(to right,#ff4500, #ffa500)`,
          backgroundSize:this.gradientSize,
        };

      },

      getcolor(index){
        return this.colors[index];
      }
  },
};
</script>

<style scoped>
.friend-head {
  height: 300px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.3);
}
.container {
  border-radius: 10px;
  grid-gap: 40px; /* 相邻盒子的间距 */
  /* width: 1800px; */
  max-width: 1200px;
  column-count: 2; /* 列数 */
  padding: 30px 40px;
  background-color: rgba(255, 255, 255, 0.3);
}

.box {
  /* 盒子的样式 */
  break-inside: avoid; /* 防止内容被分隔到不同列 */
  margin-bottom: 20px; /* 内容项之间的间距 */
  width: 500px;
  border-radius: 10px;

/* 放大 */
  transform-origin: center;
  animation-name: scale-up;
  animation-duration: 1.4s;
  animation-fill-mode: forwards;

}

.box-title {
  font-size: 18px;
  padding: 10px 0 10px 10px;
  /* background-size:300% 300%; */
  background-image: var(--commentURL);
  opacity: 0.8;
  border-radius: 10px;

  -webkit-animation:gradientBG 10s ease infinite;

}


.box-title-1{
  color:white;
  font-size:22px;
}



@keyframes scale-up {
  from { transform: scale(0); }
  to { transform: scale(1); }
}
</style>
